<template>
  <div class="detail">
    <Header>
      <div slot="left" @click="goBack()">
        <i class="iconfont icon-fanhui-xianxing"></i>
      </div>
      <div class="menu" slot="center">
        <ul>
          <li v-for="(item, index) in menu" :key="index">{{ item.title }}</li>
        </ul>
      </div>
      <div slot="right">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </Header>
    <section>
      <div>
        <swiper :dataList="dataList"></swiper>
        <div class="title">{{ dataList.name }}</div>
        <div class="price">{{ dataList.price }}</div>
        <div class="content">{{ dataList.introduct }}</div>
        <div class="sales">{{ dataList.sales }}</div>
        <div class="imglist">
          <img :src="dataList.cover" alt="" />
          <img :src="dataList.cover" alt="" />
          <img :src="dataList.cover" alt="" />
          <img :src="dataList.cover" alt="" />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Swiper from "@/components/detail/Swiper.vue";
import Header from "../../components/common/Header.vue";
import Bscroll from "better-scroll";

export default {
  name: "Detail",
  data() {
    return {
      Bscroll: null,
      dataList: {},
      menu: [
        {
          id: 1,
          title: "商品",
        },
        {
          id: 2,
          title: "评价",
        },
        {
          id: 3,
          title: "详情",
        },
        {
          id: 4,
          title: "推荐",
        },
      ],
    };
  },
  components: { Swiper, Header },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {
    this.$http
      .$axios({
        url: "/api/item?id=" + this.$route.query.id,
      })
      .then((res) => {
        this.dataList = res.data.data[0];
      })
      .catch((err) => {
        console.log("请求出错了" + err);
      });
  },
  mounted() {
    this.Bscroll = new Bscroll("section", {
      click: true,
      probeType: 3,
    });
  },
  updated() {
    this.Bscroll.refresh();
  },
};
</script>

<style scoped lang='scss'>
.detail {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
section {
  width: 100%;
  height: 100%;
}
.menu ul {
  display: flex;
  justify-content: space-around;
  li {
    margin: 0 0.266667rem;
    font-size: 0.426667rem;
  }
}
</style>